<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
			.fontSize{
				font-size: 30px;
			}
			.fontColor{A
				color: #7FFF00;
			}
			.divSizeW{
				width: 100px;
			}
			.divSizeH{
				height: 100px;
			}
			.divBackgrounp{
				background: #ff5500;
			}
			.lx1Bjs{
				background-color: rgb(25, 126, 32);
			}
			.lx1Bjs2{
				background-color: rgb(101, 28, 126);
			}
			.ishide{
				display: none;
			}
			ul li{
				width: 100px;
				height: 50px;
				border: aqua solid 1px;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<fieldset>
				<legend>值绑定</legend>
				<p>插值语法:{{msg}}</p>
				<p>表达式求和:{{a+b}}</p>
				<p>表达式比大小:{{b>a?b:a}}</p>
				<p v-text="text"></p>
				<p v-html="html"></p>
				<button @click="msg='您好！'">修改数据</button>
			</fieldset>
			
			<br><br>
			
			<fieldset>
				<legend>属性绑定</legend>
				<p>v-bind属性绑定</p>
				<img src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF" alt="图片" :style="imgSize">
				<img v-bind:src="imgSrc" v-bind:alt="imgAlt" :style="imgArr1">
				<img :src="imgSrc" :alt="imgAlt" :style="imgObjck1" >
				<div>class属性绑定，变量、对象、数组</div>
				<div :class="fontSize">字体大小</div>
				<div :class="fontColor">字体颜色</div>
				<div :class="{divSizeW:istrue,divSizeH:istrue,divBackgrounp:istrue}"></div><br>
				<div :class="objDiv">对象</div>
			</fieldset>
			
			<br><br>
			
			<fieldset>
				<legend>事件绑定</legend>
				<p>点击事件</p>
				<button @click="divClick1">无参事件1</button>
				<button @click="divClick2(100,msg,$event)">传参事件2</button>
				<p>点击修饰符：取消默认事件prevent 阻止冒泡stop</p>
				<div style="width: 200px;height: 200px;background-color: #FF5500;" @click="divClick1">
					<div style="width: 100px;height: 100px;background-color: #baff3a;" @click.stop="divClick2(100,msg,$event)">
						<a href="#" @click.prevent="">空连接</a>
					</div>
				</div>
				<br>

				<p>键盘事件</p>
				<input type="text" @keydown="divMouse"/>
				<p>键盘修饰符：直接加字母，其他键shift、alt、ctrl、方向键、最后可以用键码</p>
				<input type="text" @keydown.left.down.right.up="divMouse"/>
			</fieldset>
			
			<br><br>
			
			<fieldset>
				<legend>练习</legend>
				<p>1、点击按钮修改div背景色:style修改颜色、class修改颜色</p>
				<p>style修改颜色</p>
				<div :style="lx1Color"></div>
				<button @click="lx1Color=lx1Color2">修改颜色</button>
				<p>class修改颜色</p>
				<div :class="lx1Bjs" style="width: 200px;height: 200px;"></div>
				<button @click="lx1Bjs=='lx1Bjs'?lx1Bjs=lx1Bjs2:lx1Bjs='lx1Bjs'">修改颜色</button>
				<p>用函数随机生成rgb数字</p>
				<div :style="lx1Arr1"></div>
				<button @click="lx1MethodsColor">修改颜色</button>
				<p>2、鼠标移入移出修改背景色</p>
				<div :style="lx2Arr1" @mouseleave="lx2Arr1.backgroundColor=lx2Mouseenter()" @mouseenter="lx2Arr1.backgroundColor=lx2Mouseenter()"></div>
				<p>3、点击按钮实现隐藏与显示</p>
				<button type="button" @click="lx2Ishide=!lx2Ishide">{{lx2Ishide?'显示':'隐藏'}}</button>
				<img src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF" style="width: 200px;" :class="{ishide:lx2Ishide}">
				<p>4、多个选项卡选中变色</p>
				<ul style="list-style: none;">
					<li @mouseenter="lx2Chose('选项1')" :class="{lx1Bjs2:lx4bl==='选项1'}">选项1</li>
					<li @mouseenter="lx2Chose('选项2')" :class="{lx1Bjs2:lx4bl==='选项2'}">选项2</li>
					<li @mouseenter="lx2Chose('选项3')" :class="{lx1Bjs2:lx4bl==='选项3'}">选项3</li>
					<li @mouseenter="lx2Chose('选项4')" :class="{lx1Bjs2:lx4bl==='选项4'}">选项4</li>
					<li @mouseenter="lx2Chose('选项5')" :class="{lx1Bjs2:lx4bl==='选项5'}">选项5</li>
				</ul>
			</fieldset>
			
			<fieldset>
				<legend>双向绑定</legend>
				<input type="text" v-model="sxbbIpt"/>
				<p>{{sxbbIpt}}</p>
			</fieldset>
		</div>
		<script>
			let app = new Vue({
				el:'#app',
				data:{
					msg:"你好！",
					a:10,
					b:20,
					sxbbIpt:'aaa',
					text:'v-text方法',
					html:'<h1>html方法</h1>',
					imgSrc:'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF',
					imgAlt:'图片',
					imgSize:'width: 200px;',
					imgBorder:'border:1px solid #ff181b',
					imgArr1:{
						width: '200px',
						border: '1px solid #0000FF',
						paddingTop: '20px'
					},
					imgObjck1:[
						{paddingTop: '30px'},
						{width: '300px'},
					],
					fontSize:'fontSize',
					fontColor:'fontColor',
					divSizeW:'divSizeW',
					divSizeH:'divSizeH',
					divBackgrounp:'divBackgrounp',
					istrue:true,
					isfalse:false,
					objDiv:[
						'fontColor',
						'divSizeW',
						'divSizeH',
						'divBackgrounp'
					],
					lx1Color:'width: 200px;height: 200px;background-color: rgb(126, 57, 93);',
					lx1Color2:'width: 200px;height: 200px;background-color: rgb(20, 5, 126);',
					lx1Bjs:'lx1Bjs',
					lx1Bjs2:'lx1Bjs2',
					lx1Arr1:{
						width: '200px',
						height: '200px',
						backgroundColor: 'rgb(20, 5, 126)'
					},
					lx2Arr1:{
						width: '200px',
						height: '200px',
						backgroundColor: 'rgb(20, 5, 126)'
					},
					ishide:'ishide',
					lx2Ishide:true,
					lx4bl:''
				},
				methods:{
					divClick1:function(e){
						console.log("无参",e);
					},
					divClick2:function(a,b,e){
						console.log(a,b,e);
					},
					divMouse:function(){
						console.log("键盘事件");
					},
					lx1MethodsColor:function(){
						this.lx1Arr1.backgroundColor='rgb('+Math.floor(Math.random()*(255+1))+','+ Math.floor(Math.random()*(255+1))+','+ Math.floor(Math.random()*(255+1))+')';
					},
					lx2Mouseenter(){
						let r=Math.floor(Math.random()*256);
						let g=Math.floor(Math.random()*256);
						let b=Math.floor(Math.random()*256);
						return 'rgb('+r+','+g+','+b+')';
					},
					lx2Chose(v){
						this.lx4bl=v;
					}
				}
				
			})
		</script>
		
		<!-- 
			数据绑定
				值绑定
					插值表达式{{}}，data里的变量，存放表达式，函数调用
					v-text原样输出
					v-html解析成标签
				属性绑定
					语法：v-bind:属性名="vue编译环境" 
					简写：:属性名="vue编译环境" 
					style属性绑定： :style="样式字符串、对象、数组"
					class属性绑定： :class="class名、对象、数组"
				事件绑定
					语法：v-on:事件名="函数名、函数名（）、简单语句"
					简写：@事件名="函数名、函数名（）、简单语句"
					传参：不添加小括号即不需要传参，当添加小括号时，可以在小括号里写入需要传入的数据。不传参时，触发函数的第一个形参就是获取事件对象的event，如果有传参，又需要获取事件对象，则需要在传参时加入实参$event。
					修饰符：可以快速的优化
					prevent阻止默认事件执行
					stop阻止事件冒泡
					once一次性事件
					键盘修饰符：left、right、up、down、enter、tab、shift、ctrl、alt、space或者可以直接写键码对应的数字
				数据双向绑定
					v-model 经常作用于input框内
		 -->
	</body>
</html>
